<template>
    <div class="bg-#E6EDF7 h-full rounded-12px p-16px pt-0px border-box flex flex-col">
        <div class="text-base text-gray text-center py-8px rounded-12px">会员卡效果预览</div>
        <div class="bg-#03061B h-full flex-1 rounded-10px text-white bg-1 overflow-hidden">
            <div class="flex justify-between relative z-100">
                <div class="icon-head w-full h-81px relative">
                    <div class="absolute left-30px top-55px">
                        <el-icon color="#fff">
                            <ArrowLeftBold />
                        </el-icon>
                    </div>
                    <div class="absolute left-120px top-55px">子弹省钱会员</div>
                </div>
            </div>
            <div class="px-15px box-border overflow-auto h-90%">
                <div class="flex items-center mt-20px">
                    <img class="w-40px h-40px rounded-10px mr-8px" src="" alt="">
                    <div>
                        <div class="flex items-center mb-4px justify-between">
                            <div class="text-base text-#F6C79B">XXXX有限公司</div>
                            <div class="bg-#425698 bg-opacity-40 px-8px py-3px rounded-full ml-8px">
                                <div class="text-sm text-#6474A7">未开通</div>
                            </div>
                        </div>
                        <div class="text-sm text-#6474A7">您的团队尚未开通会员</div>
                    </div>
                </div>
                <div class="member-bg mt-12px pl-16px pr-12px box-border">
                    <div class="flex justify-end mr-12px pt-14px">
                        <div class="bg-#0E1D67 text-sm text-white px-4px py-7px rounded-full inline-block text-right">
                            常州***在14分钟前开通了会员
                        </div>
                    </div>
                    <div>
                        <img class="w-100px h-31px mb-10px" src="../../../assets/image/membership/icon-vip.png" />
                        <div class="flex text-sm text-white">
                            <div class="flex-shrink-0">未开通</div>
                            <div v-show="infoRules?.length" class="mx-10px -mt-1px">|</div>
                            <el-carousel autoplay direction="vertical" indicator-position="none" height="20px" class="w-full">
                                <el-carousel-item v-for="(i, index) in infoRules" :key="index">
                                    <div class="w-full h-20px text-white">
                                        {{ i }}
                                    </div>
                                </el-carousel-item>
                            </el-carousel>
                        </div>
                        <div class="flex items-center text-white text-opacity-60 mt-10px">
                            <div class="text-sm mr-8px">开通记录</div>
                            <el-icon>
                                <ArrowRight />
                            </el-icon>
                        </div>
                    </div>
                </div>
                <div class="text-xl font-bold text-white mt-30px mb-14px">
                    会员权益
                </div>
                <div v-for="(i, index) in rightsValue" :key="index"
                    class="w-full px-15px py-16px rounded-14px bg-#2C354A box-border relative mb-12px">
                    <div class="flex">
                        <div class="set-icon-bg">
                            <!-- <img class="w-auto h-22px" src="../../../assets/image/membership/icon-head.png" alt=""> -->
                            <div class="text-right pr-10px text-base text-golden font-bold mt-5px">权益{{ (index as
                                number) + 1 }}</div>
                        </div>
                        <div class="flex">
                            <el-image class="w-98px h-98px rounded-6px mr-25px" :src="i?.fileUrl?.[0]">
                                <template #error>
                                    <div class="flex w-full h-full justify-center items-center">
                                        <el-icon>
                                            <Picture />
                                        </el-icon>
                                    </div>
                                </template>
                            </el-image>
                            <div>
                                <div class="text-lg text-#F6C79B">{{ i.name }}</div>
                                <div v-if="i.amount" class="flex items-end text-#F1564D">
                                    <div v-if="i.amount" class="text-26px font-bold">
                                        {{ i.amount }}
                                    </div>
                                    <div v-if="i.amountUnit" class="text-base mb-4px">
                                        {{ MemberUnitEnum[i.amountUnit] }}
                                    </div>
                                </div>
                                <div v-if="i.money">
                                    <div v-if="i.money" class="text-26px font-bold">
                                        {{ i.money }}
                                    </div>
                                    <div v-if="i.amountUnit" class="text-base mb-4px">
                                        {{ MemberUnitEnum[i.amountUnit] }}
                                    </div>
                                </div>
                                <div class="mt-8px" v-for="(item, index) in rules(i.introduce)" :key="index">
                                    <div class="flex items-center mb-6px">
                                        <div
                                            class="flex items-center justify-center bg-#F6C79B w-14px h-14px rounded-full mr-4px">
                                            <el-icon size="10" color="#fff">
                                                <Check />
                                            </el-icon>
                                        </div>
                                        <div class="text-lightgray">{{ item }}</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
// import dayjs from 'dayjs'
import { compact } from 'lodash'
import { computed } from 'vue'
import type { AnyObject } from '@/api/type'
import { PropType } from 'vue'
import { getOptionsFromEnum, RightsTypeEnum, MemberUnitEnum, MemberProductEnum, MemberUseTimeModeEnum, MemberUseScopeEnum, MemberGetModeEnum, MemberUseLimitEnum, MemberGetPeriodEnum, MemberDistributeModeEnum } from '@/utils/enum'

const props = defineProps({
    rightsValue: {
        type: Object as PropType<AnyObject>,
        required: true
    },
    infoValue: {
        type: Object as PropType<AnyObject>,
        required: true
    }
})

const infoRules = computed(() => {
    if (props.infoValue?.introduce?.trim()) {
        const ruleList = props.infoValue?.introduce.trim().split('#')
        return compact(ruleList)
    }
    return []
})

const rules = computed(() => {
    return (introduce: string) => {
        if (introduce?.trim()) {
            const ruleList = introduce.trim().split('#')
            return compact(ruleList).filter((item: string, index: number) => {
                return index < 2
            })
        }
        return []
    }
})

</script>
<style lang="scss" scoped>
.icon-head {
    background: url('../../../assets/image/membership/header-bg.png') no-repeat;
    background-size: cover;
}

.bg-1 {
    position: relative;

    ::after {
        position: absolute;
        content: '';
        width: 290px;
        height: 290px;
        left: 270px;
        top: -270px;
        background: #0E298C;
        filter: blur(75px);
        z-index: -10;
    }

    ::before {
        position: absolute;
        content: '';
        width: 15px;
        height: 255px;
        left: 80px;
        top: -40px;
        background: #0E298C;
        filter: blur(40px);
        z-index: -10;
        transform: rotate(-60deg);
    }
}

.member-bg {
    background: url('../../../assets/image/membership/memeber-bg.png') no-repeat;
    width: 100%;
    height: 150px;
    background-size: 100% 100%;
}

.set-icon-bg {
    background: url('../../../assets/image/membership/icon-head.png') no-repeat;
    width: 100%;
    height: 22px;
    background-size: 100% 100%;
    position: absolute;
    right: 0;
    top: 0;
}
</style>
